MakeとLINEで作るAI*LINEBotの作り方 - ハンズオン資料
public.icon
https://gyazo.com/feb051c36ea2f33ad13002e51c4ffc63
AIビジネス研究会
2024/7/2
TEQS
18:00 ~ 19:30 (90min)
イベント情報
ご参加いただきありがとうございます！🙇♀️
本日の資料はすでに公開されています。
https://gyazo.com/ad1628b4e7d950c952ce89b5a9f44f41
本日のハンズオンのねらい・位置付け
今日イベントに参加したから即日すぐにビジネス（収益を得る）ことができるわけではありません🙅
LINEとAIを掛け合わせたサービスを実際に作りながら、色々なアイデアを考えていただきたいです。
私の目標
「/icons/line.iconLINEを使った開発を無料から簡単に始められるんだ」と知っていただく
「/icons/line.iconLINEを使った収益化までも道のりはそう難しくない！」と知っていただく
LINE*AIビジネスの大枠を知ることで、新規事業などのアイデアの一つとして持ち帰っていただきたい
自己紹介
https://gyazo.com/94e9de9c77b09f875152f88418708296
IY Tech 代表 井上陽介 (ようかん)
フリーランスエンジニア（個人事業主） / LINEヤフー社認定LINE API Expert / 大学生
https://gyazo.com/13dfd8cc3481f51c42e12bd143021408
公式HP
好きなこと
料理🍳 / ワーケーション
LINEを使ったシステム開発が専門領域です。
お気軽にご相談くださいませ。
この資料はHelpfeelCosenseというドキュメントツールを使用しております。 今日の流れ
①18:00~18:15(15min) - 紹介
自己紹介など(2.5min)
LINEを使ってビジネスを行う方法(5min)
本日のハンズオンの完成品の紹介(2.5min)
LINE開発概要紹介(2.5min)
今回利用するノーコードツールMakeの紹介(2.5min) ②18:15~19:05 (50min)- 実装
ハンズオンのためのアカウント関係の準備・確認 (5min)
公式アカウントの作成 (5min)
Makeを用いたシステム構築 (20min)
動作確認 (10min)
応用方法について (10min)
③19:00~19:30(30min) - 終わりに
LINE*AIビジネス事例紹介 - AIチャットくん (10min)
質疑応答 (10min)
念の為温度感の確認をさせてください。
LINE公式アカウントを作成されたご経験
ChatGPTをご利用されてご経験
ChatGPT APIを利用されたご経験
Makeをご利用されたご経験
本編 開始！
LINEを使ってビジネスを行う方法(5min)
LINE公式アカウントは誰でも簡単に作ることができる
その公式アカウントを使ってビジネスを行う（収益を得る）ことができる
マネタイズモデルはさまざまで、いろんな業種・業態に応じてプログラミングを通して実現可能！
一部方法はノーコードでも簡潔し、誰でも簡単にLINEでビジネスを行うことが可能
トークルーム広告マネタイズ
https://gyazo.com/8817f79936b3a5ac8fe9857855d60426
サブスクリプションモデル
https://gyazo.com/53741e6efe352e3a9ef11d164e44cb1f
https://gyazo.com/27e2fde8fb5db663e7b2967104bce6a6
https://gyazo.com/3d5bbbc8947ea9ded33b6be35bee1d10
買い切りモデル
Stripeなどを連携し、Botの制御を課金を行った人だけが動くようなBotにすることで実現可能 その他ビジネスの窓口として利用する
直接LINE上で金銭のやり取りがなくとも、リアル店舗の集客として,オンラインサービスのカスタマーサポートとしてなどでも利用可能。
本日のハンズオンの完成品の紹介(2.5min)
本日はAIを掛け合わせたLINEBotを作れるようになるための第一歩をご紹介
画像の内容を読み取り、その内容を元に会話をしてくれるLINEBotを作ります
https://i.gyazo.com/76a21b8e4dc90e2bb4e687c50e1cd250.mp4
https://gyazo.com/29414479029be45955cc741e365d6881
LINE開発概要紹介(2.5min)
https://gyazo.com/f386a64a029b8e40cde229a3eccd9ceb
LINEのサーバ（Platform）と自分のシステム（Server）を連携することが、自分好みのLINE公式アカウント（LINEBot）を開発することができる
今回利用するノーコードツールMakeの紹介(2.5min) https://gyazo.com/d3fb3b47c95d78494da2e0bee1c4dec6
https://gyazo.com/2c5fb76b7fefadf2bdb8e1d9c00c5289
https://gyazo.com/6431a6eef8cc16d406f9ed6550a54a84
https://gyazo.com/bf51cf109717e66988ccba541a0ba085
https://gyazo.com/d99229fc9caf079d1acff60a14ca32c8
https://gyazo.com/62b569a6b90efe356f8184271e1e14e6
https://i.gyazo.com/3e76838729ed4edb35b212b803e64d18.gif
こんな感じで操作し、システム連携・構築できるノーコードツール。
ハンズオンのためのアカウント関係の準備・確認 (5min)
◽️LINEの開発者ページログインする (LINEアカウントでOK)
◽Makeにログインする（GoogleアカウントでOK）
◽openAIのAPIのサイトにログインする (GoogleアカウントでOK)
公式アカウントの作成 (5min)
LINE公式アカウント（LINEBot）を作成しよう！
https://gyazo.com/6a8820084e48d8db03c03d731083dc45
https://gyazo.com/0563014e0a843c44ba3c6653c6abb384
ビジネスIDの新規作成
開発者名、メールアドレスを入力する
ビシネスアカウントの作成
ご自身のLINEアカウントでログインされても問題ありません。
https://gyazo.com/59e301cf3ad0b25714418f2d714fb537
新規プロバイダー作成
https://gyazo.com/99285a73c1668a0c5aeebb118933d44e
プロバイダー名はなんでもいい
https://gyazo.com/8829cd2b4ee50a79c61333772436b05e
作成したプロバイダーをクリックする
https://gyazo.com/c304f1a981cf2ab11a16c79542c0bba7
新規チャネルとして「 Messaging API」をクリック
https://gyazo.com/7e143851a3cf10ffd7b108ad19db80c4
国を日本にして
https://gyazo.com/e9e99a0f4fefd51f13eaf39db4cd02d3
公式アカウントの名前
公式アカウントの説明
公式アカウントの職種を入力する（大業種・小業種特になんでもいい）
https://gyazo.com/7165a9a2c5dd153dc2c3e1d59940c0e3
同意のチェックボックスにクリック
https://gyazo.com/098b106fc8f330d9ad2602220f66db10
OKで新規作成！
https://gyazo.com/b9128d6a8f2fad2bca4e89151ef10119
https://gyazo.com/5396d933dca2cd93ecf9cc4362024f2a
https://gyazo.com/5503f68450b7cc74c41b84f62fc04f12
友達登録しておこう
https://gyazo.com/4d52cbaf3d6fda3febaf266f64db9350
https://gyazo.com/c60df1f4094bc7f977940d8b0ff67424
https://gyazo.com/4aca2d7a68b5535b211a4c871cee4ef3
https://gyazo.com/4be4fe1c9f773599298218780c44e22f
上から順番にオフオフオンオフ
チャット
この管理画面上で手動のやり取りをするかどうかを設定する
あいさつメッセージ
友達登録された時に自動で送信されるメッセージを送るか送らないか
Webhook
自分のシステムと連携するかしないか
応答メッセージ
ユーザーから送られてきたメッセージに対して、LINE公式アカウントで設定された自動でメッセージの返信をするかしないか
https://gyazo.com/e3d4e33f61187792c167be43f1e8ddf0
Makeを用いたシステム構築 (20min)
https://gyazo.com/29414479029be45955cc741e365d6881
Make
https://gyazo.com/edb10dd1bb5c6e1a802ddc8775cbf6f8
https://gyazo.com/dcc76922fb8292acf941f6520ed6e550
https://gyazo.com/79016e7c23c06b04dbb23a21168b766b
https://gyazo.com/791a85e96030b4dfc9be90320fcdfb71
https://gyazo.com/7bb6afebcdd5b6042aada36210f2dbcb
https://gyazo.com/890927855108d55b3ac497dadcfaf19e
https://gyazo.com/15c667b7724a9a1edc8c44dd5983d56f
https://gyazo.com/d6d65287f0fab5a95866e3731190733d
https://gyazo.com/7e627f60fcc3e89f9dc32ba6cb2b98a9
この画面まで来れたら実装が開始できます！
LINEとの接続
https://gyazo.com/712ca8fc96fbc32bc3a2dbc5717779e7
https://gyazo.com/ce671b9024391ab8f0fd0867b142e4b4
https://gyazo.com/f78d036c1121ed96ecd299575109ec7b
https://gyazo.com/cb6bcdc1882cfc9a8df38d38d9442641
https://gyazo.com/b423a7c27af08d971671b35d64818df6
https://gyazo.com/236249ba92d460c0d845ed7da9216605
https://gyazo.com/819a88644acf32ae5f5cd6ab20a2fd3b
https://gyazo.com/5a1469b8ec8422ffebde056d79a70112
https://gyazo.com/fc11a55e6bff9a8e2dcc699484c90262
https://gyazo.com/d409d4bc325090043a9b018bed402273
https://gyazo.com/a4f7f18c8232036c15cf9d9d23e7f155
画像のダウンロードができるようにする
https://gyazo.com/0f997935f01a03687478b1b2c31dc1c6
https://gyazo.com/e28d2b6d474ef60efb40341ca9a81e17
https://i.gyazo.com/3ee97d5132ee7b1484cc5aae0d39a906.gif
MessageIDを指定する
GPTを連携する
https://gyazo.com/a0bfbe82e004fedc443734289603d11a
https://i.gyazo.com/d7cdff5f86ed041a56d8311e97b0e20a.gif
Analyze Imagesを選択
GPTのAPIKEYを入力して連携する
https://i.gyazo.com/025384dc58cbce899e5fe4c93945cd6e.gif
プロンプト、画像、AIモデルを指定する（画像認識はgpt-4oしか使えないので注意）
https://i.gyazo.com/d731d10f6152df6e401e45acd8b65356.gif
右上が赤色になっている場合はエラーが出ているかもしれないので、もう一度クリック→Saveする
消えたらOK
返信を実装する
https://i.gyazo.com/378cfbf277671d0723788f9a69cc841f.gif
LINEのReply Messageを選択
https://i.gyazo.com/8ff7c656290d337f1bb7a4eb4152816f.gif
保存
こまめな保存をお忘れなく！
https://gyazo.com/43476ffd88183d31505a031794c77107
RunOnceで動かしてみる
https://gyazo.com/5e7da161cbc28f5747ad1090a6bd8116
永続化
https://gyazo.com/0263acdab05b793e48b75e335480d3c7
動作確認 (10min)
公式アカウントに画像を送って認識できるか確認してみてください
応用方法について (10min)
細かい修正は公式ドキュメントをみながら行っていきます。
挨拶メッセージに対応する
follow Eventに対応して返信メッセージを設定する
https://gyazo.com/760e00294fafa9e1e0588382b58c3582
https://gyazo.com/80a7deb0d46bb4d4a092ecbe747af58e
会話内容を保存して引き続き会話できるようにする
https://gyazo.com/643fcc2ab10c50a01c9cfbab1a398b8f
https://gyazo.com/90ac6c68c010c775a24cf64aef42328dhttps://gyazo.com/2a1b175cfe298c1cf505e7e0b081a732
後始末について
このまま公式アカウントの友達追加URLが外部に漏れると、ChatGPTの課金が増えてしまいます。
対策
APIトークンを無効にする / MakeをOFFにする /LINEのWebhookをオフにする etc..
LINE*AIビジネス事例紹介 - AIチャットくん (10min)
https://gyazo.com/408b967f1ec7e6757c36b5b813fe947e
質疑応答 (10min)
本日の内容 / LINEにまつわること / AIツールのこと などなんでも大丈夫です🙋♀️
宣伝
明日、グランフロント大阪でLINEの勉強会があります！
しかも、生成AI*LINEを使ったサービスの事例紹介で数人登壇されます。
僕も、AI占いくんという14万人のLINEサービスについて説明をする予定です。
ぜひご興味がございましたら明日のイベントもぜひご参加ください！
https://gyazo.com/fba3cfe0aaec7a02c5a1a0592525542d
https://gyazo.com/e684da482e1e40bf0806ae2d6a19036c
イベント終了後向け🔗リンク集
普段勉強会などで登壇した資料を公開しております。
https://gyazo.com/3cc722550279ceaf03689d40a8bc6920
MakeとLINEの設定を動画で復習したい方へ
https://www.youtube.com/watch?v=bhuhnsmj0Nk
Makeを使って複雑なBotを作ってみたい方へ
お仕事のご依頼やお問い合わせは公式サイトからお待ちしております。
ハンズオン資料は以上となります。ご覧いただきありがとうございました。
-------------- GPT4oの権限がないと言われた方へ
参考情報
以下にアクセス
https://gyazo.com/4f68b84fbe54edb9737c17bdecb28d4f
確かにgpt4oがない
https://gyazo.com/ec8499c7bb2fbc706e89067a3f2b7b21
右上のsettings
https://gyazo.com/30172c80ed399d9ac12de36be3b28290
billingページ
https://gyazo.com/64e43870cee7dadd58113108bc112be8
https://gyazo.com/09191837d911ee8891221f2fbfcc779a
https://gyazo.com/cdc3aacfad4b765fdaff46c56e1ca3c9
クレジットカードを入れて5ドル購入
https://gyazo.com/07d1c500196653bba0facffcefc2f7ad
https://gyazo.com/5aa4d6fc800bd583b2ac9b26671d6a1b
出るようになりました。
これで動くようになると思われます。